<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>首页</title>
    {% block styles %}

    {% endblock %}
    <style>
        *{
            margin: 0;
            padding:0;
        }
        body{
            width: 1680px;
            height: 100%;
            background-color: #EEEE;
            opacity: 0.9;
        }
        /*----------------------banner-----------------*/
        .banner{
            position: fixed;
            width: 100%;
            background-color: #396bb3;
            height: 40px;
            line-height: 40px;
            color: white;
            top: 0;
            left: 0;
            z-index:100;
        }

        .banner-top{
            margin-left: 340px;
            width: 1200px;
        }

        .banner-left{
            float: left;
        }


        .banner-right{
            width: 350px;
            line-height: 40px;
            float: right;

        }
        .banner-right .search{
            float: left;
            width: 154px;
            height: 23px;
            margin-top: 8px;
            background-color: white;
            word-spacing: 0;
        }

        .banner-right .search .search-input{
            display: inline-block;
            float: left;
            border: 0px;
            width: 130px;
            height: 23px;

        }
        .banner-right .search .search-item{
            display: inline-block;
            float: right;
            width: 23px;
            height: 23px;
            border: 1px solid #e0e0e0;
            border-right: 0px;
            border-bottom: 0px;
            border-top: 0px;
        }
        .our-center {
            float: right;
            width: 140px;
            height: auto;


        }
        .our-center span{
            display: inline-block;

        }
        .our-center .uername {
            float: left;
            width: auto;
            height: auto;
            text-align: left;
            line-height: 40px;

        }
        .our-center .touxiang {
            float: right;
            width: 40px;
            height: 40px;
            border-radius: 50px;
            background-color: white;

        }

    /*---------------content--------------------*/
       .main-content{
           margin-left: 340px;
           width: 1200px;
           min-height: 800px;
           height: auto;  !important: ;
           padding-top: 60px;
       }

        .main-content .text-content{
            height: 760px;
            width: 1120px;
            padding: 50px 40px 20px;
            background-color: #10fcff;
        }
        .main-content .text-content .left{
            border: solid 1px red;
            height: 700px;
            width: 250px;
            float: left;
        }
        .main-content .text-content .left a{
            display: inline-block;
            text-align: center;
            margin-left: 50px;
            line-height: 150px;
        }
        .main-content .text-content .right{
            border: solid 1px yellow;
            height: 700px;
            width: 850px;
            float: right;
        }
        .main-content .text-content .right


        /*------------------底部foot--------------------*/

        .main-content .content-foter{
            clear: both;
            margin: 0 auto;
            width: 1200px;
            padding-top: 18px;
            font-size: 12px;
            text-align: center;
            /*background-color: #fff;*/
            background-color: firebrick;
            position: relative;
            overflow: hidden;
            border-top: solid 1px #ccdcef;
        }
        .main-content .content-foter .foot-now a{
            display: inline-block;
            color: #369;
            margin-left: 5px;
            margin-right: 5px;
        }
        .main-content .content-foter .foot-now a:hover{
            text-decoration: underline;
        }
        .main-content .content-foter .foot-now2 a{
            text-decoration: none;
        }
        .main-content .content-foter .foot-now2 .foot_e{
            vertical-align: -3px;
            margin-right: 3px;
        }
        .main-content .content-foter .foot-now2 .foot_b{
            font-size: 12px;
            color: #999;
        }
        .main-content .content-foter .foot-now2 .foot-text,.foot-text1,.foot-text2{
            margin-top: 6px;
        }

        /*--------------返回顶部----------------*/
        #gotop {
            background: url('images/Back-to-the-top_38_78.png') 0 0 no-repeat;
            bottom: 30px;
            left: 86%;
            cursor: pointer;
            display: none;
            height: 38px;
            width: 38px;
            position: fixed;
            z-index: 2;
        }
        #gotop:hover{
            background-position: 0 -40px;
        }



    </style>
</head>
<div class="outer">
    <div class="banner">
        <div class="banner-top">
            <div class="banner-left">
                <span class="logo"></span>
                <span class="shouye">首页</span>
            </div>
            <div class="banner-right">
                <div class="search">
                    <input class="search-input" type="text" placeholder="请输入关键字查询">
                    <span class="search-item"></span>
                </div>
                <div class="our-center">
                    <span class="uername">用户名字</span>
                    <span class="touxiang"></span>

                </div>
            </div>

        </div>
    </div>
    <div class="main-content">
        <div class="text-content">
            <div class="left">
                <a href="/blog/student/">学生管理系统</a>
                <a href="/blog/teacher/">老师管理系统</a>
                <a href="/blog/sourse/">课程管理系统</a>
                <a href="/blog/classes/">班级管理系统</a>
            </div>


            <div class="right">
                {% block studentsmessage %}
                <h1 class="">welcome to login teaching system!!</h1>
                {% endblock %}
            </div>
        </div>
        <div class="content-foter">
            <div class="foot-now">
                <a href="/" target="_blank">关于我们</a>
                <span>|</span>
                <a href="/" target="_blank">联系我们</a>
                <span>|</span>
                <a href="/" target="_blank">服务条款</a>
                <span>|</span>
                <a href="/" target="_blank">隐私政策</a>
                <span>|</span>
                <a href="/" target="_blank">博客热搜榜</a>
                <span>|</span>
                <a href="/" target="_blank">下载客户端</a>
                <span>|</span>
                <a href="/" target="_blank">意见与反馈</a>
                <span>|</span>
                <a href="/" target="_blank">友情链接</a>
                <span>|</span>
                <a href="/" target="_blank">积分商城</a>
                <span>|</span>
                <a href="/"  title="Rss订阅，Feed地址：http://dig.tsxiaojun.com/feed.xml" target="_blank">公告</a>
                <img src="images/ct_rss.gif" alt="">
            </div>
            <div class="foot-now2">
                <div class="foot-text">
                    <a href="http://www.gozap.com/" target="_blank">
                        <img class="foot_e" src="images/gozap-logo.gif" alt=""></a>
                    <span class="foot_d">旗下站点</span>
                    <span class="foot_a">©2018 tsgaoxiaojun.com</span>
                    <a class="foot_b" href="http://www.miibeian.gov.cn/" target="_blank">京ICP备09053974号-3 京公网安备 110102004562</a>
                </div>
                <div class="foot-text1">
                    <span class="foot_d">违法和不良信息举报：</span>
                    <span class="foot_a">电话：010-58302039 </span>
                    <span class="foot_a">邮箱：
                    <a href="mailto:jubao@chouti.com">tsgaoxiojun@163.com</a>
                </span>
                </div>
                <div class="foot-text2">
                    <span>版权所有：小军吹牛逼科技有限公司</span>
                </div>
            </div>
        </div>
        <a href="#javascript" title="回到顶部" class="icon-main" id="gotop" style="left: 1479px; display: block;"></a>

    </div>
</div>


</body>
</html>